<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <p>
            <span v-for="num in numList">{{num}}</span>
        </p>
        <ul>
            <li v-for="(item, index) in objList">{{index + 1}} -- {{item.title}} -- {{ item.price }}</li>
        </ul>


        <div>
            <input type="text" v-model="name" placeholder="请输入用户名">
            <input type="text" v-model="age" placeholder="请输入年龄">
            <button @click="addUser">提交</button>
        </div>
        <ul>
            <!-- 
                v-for 使用的时候一定要加上一个 key 属性，而且该 key 属性还要是唯一的
                因为 vue 使用的是虚拟 DOM ，当我们再前面添加一个内容的时候，会在虚拟 DOM
                的前面添加该内容，但是渲染成真是 DOM 后，原来的标签位置不会改变，只会在
                最后位置新增一个新的标签，如果要解决该问题，可以在使用 v-for 的时候添加一个 key 属性
             -->
            <li v-for="user in userList" :key="user.name"> <input type="checkbox"> {{ user.name }} -- {{ user.age }}
            </li>
        </ul>


        <ul>
            <!-- 可以遍历对象 -->
            <li v-for="(value,key,index) in user" :key="key">
                {{ key }} -- {{ value }} -- {{ index }}
            </li>
        </ul>
        <!-- 
            在使用时，不建议 v-if 和 v-for 同时使用,因为优先级不同
            在 vue2 中 for 优先级高于 if
            在 vue3 中 if 优先级高于 for

            使用 for 循环
            1. 可以获取到遍历元素和索引
            2. 可以使用 key 属性标记元素和数据
            3. 可以遍历对象和数字

         -->
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                name: '',
                age: '',
                numList: [1, 2, 3, 4, 5, 6, 7],
                objList: [
                    {
                        title: '榴莲',
                        price: '1.88'
                    }, {
                        title: '香蕉',
                        price: '0.22'
                    }, {
                        title: '芒果',
                        price: '0.58'
                    }
                ],
                userList: [
                    {
                        name: '张一',
                        age: 18
                    }
                ],
                user: {
                    name: '张一',
                    age: 28,
                    sex: '女'
                }
            }
        },
        methods: {
            addUser () {
                console.log(this.name, this.age);

                this.userList.unshift({
                    name: this.name,
                    age: this.age
                })
                this.name = ''
                this.age = ''
            }
        },
    })
    app.mount('#app')


</script>

</html>